<template>
  <div class="app-customer-management">
    <section class="app-main">
      <div class="tab-button">
        <ul class="tab-button-content">
          <li v-for="(item,index) in customerType" class="item" :class="{active:currentType==index}" @click="handleChange(item,index)">{{item.name}}</li>
        </ul>
        <span class="action-add" @click="handleActionDetails">记录</span>
      </div>
      <div class="tab-body">

        <ul class="module-num">
          <li class="item">
            <span class="item-title">7520</span>
            <span class="item-tips">{{numTips1}}</span>
          </li>
          <li class="item">
            <span class="item-title">2</span>
            <span class="item-tips">{{numTips2}}</span>
          </li>
        </ul>
        <div class="module-list">
          <mt-cell v-for="item in moneyList" class="item" :title="item.money" is-link @click.native="handleDetails">
            <span class="iconfont icon-ic_xunjia" slot="icon"></span>
            <span class="item-content">{{item.name}}</span>
          </mt-cell>
        </div>


      </div>
    </section>


  </div>
</template>

<script>
  import { Header,Cell,Toast,MessageBox} from 'mint-ui';
//  Vue.component(Header.name, Header);
export default {
  components:{
    Header,
    Cell,
  },
  data () {
    return {
      numTips1:'总应收',
      numTips2:'应收方',
      customerType:[{
        name:'应收'
      },{
        name:'应付'
      }],
      currentType:'0',
      moneyList:[
        {
          id:1,
          name:'庄',
          money:'700'
        },{
          id:2,
          name:'庄港发',
          money:'500'
        },
      ]
    }
  },
  mounted(){
    this.getData();
  },
  methods: {

    handleChange(item,index){
      this.currentType=index;

      if(index==0){
        this.numTips1='总应收';
        this.numTips2='应收方';
      }else{
        this.numTips1='总应付';
        this.numTips2='应付方';
      }
    },
    handleActionDetails(){
    },
    handleDetails(){
      this.$router.push({path:'/receivable-payable-details',})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

  .app-customer-management .tab-button{
    background: #f5f5f5;
    position: relative;
    padding:16px 0;
    text-align: center;
  }
  .app-customer-management .action-add{
    position: absolute;
    top:18px;
    right:12px;
    padding:4px 10px;
    color: #fff;
    font-size: 14px;
    border-radius:3px;
    background:#007EE5;
  }
  .tab-button-content{
    display: inline-block;
    border-radius: 20px;
    border: 1px solid #007EE5;
    overflow: hidden;
  }
  .tab-button-content .item{
    display: inline-block;
    width: 80px;
    padding:4px 0;
    font-size:16px;
  }
  .tab-button-content .item.active{
    background: #007EE5;
    color: #fff;
  }
  .app-customer-management .popup-test-show{
    width: 100%;

  }
  .app-customer-management .popup-test-show{
    width: 100%;

  }

  .app-customer-management .popup-test-show .button-content{
    padding:20px;
  }

  .app-customer-management .popup-test-show .mint-button{
    background: #007EE5;
    display: block;
    width: 100%;
  }
  .app-customer-management .popup-customer-add{
    background: #f5f5f5;
    width:100%;
    height: 100%;
    padding:12px 0;
    overflow: auto;
  }
  .app-customer-management .module-num{
       background: #007EE5;
    position: relative;
       display: flex;
    padding:0 24px;

     }
  .app-customer-management .module-num .item{
    color: #fff;
    width: 50%;
    padding:24px 0;
    text-align: center;
    font-size: 14px;

  }
  .app-customer-management .module-num:after{
    background: #fff;
    width: 1px;
    position: absolute;
    top:32px;
    left:50%;
    bottom: 32px;
    margin-left: -1px;
    content: '';
  }
  .app-customer-management .module-num .item-title{
    display: block;
    font-size: 34px;

  }
  .app-customer-management .module-list .icon-ic_xunjia{
    background: #007EE5;
    display: inline-block;
    width:22px;
    height: 22px;
    margin-right:5px;
    border-radius:50%;
    color: #fff;
    font-size:13px;
    text-align: center;
    line-height: 22px;
  }
</style>
